<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>商品详情页</title>
  <link rel="stylesheet" href="./font/iconfont.css">
  <link rel="stylesheet" href="../iconfont/iconfont.css" />
  <link rel="stylesheet" href="./css/index.css" />
  <link rel="stylesheet" href="../swiper/swiper-bundle.min.css">
  <style>
    /*  Demo styles  */
    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      /* object-fit: cover; */
    }

    .swiper-pagination .swiper-pagination-bullet {
      background-color: rgba(0, 0, 0, .3);
      opacity: 1;
    }

    .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
      background-color: #000;
    }
  </style>
  <script>
    if (!localStorage.getItem('goodsId')) location.href = '../index.html'
  </script>
</head>

<body">
  <!-- 头部区域 -->
  <header id="header">
    <div class="top">
      <h1>商品详情页</h1>
      <a href="#" class="iconfont icon-zuojiantou" @click="fn"></a>
    </div>
  </header>
  <!-- 主体区域 -->
  <div class="main">

    <!-- 轮播图区域 -->
    <div class="banner">

      <!-- Swiper -->
      <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          <!-- <div class="swiper-slide">
            <img src="http://cba.itlike.com/public/uploads/10001/20230320/7143e84bf3dd41fa67b9675a9e5d81a3.jpg"
              alt="" />
          </div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div> -->
          <!-- <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div> -->
        </div>

        <div class="swiper-pagination"></div>
      </div>
      <div class="number"><span class="qian">1</span>/<span class="hou">5</span></div>
    </div>
    <!-- 商品信息 -->
    <div class="goods-info-top">
      <!-- <div class="top">
        <div class="left">
          <i>￥</i>
          <em>0.01</em>
          <span>￥6699.00</span>
        </div>
        <div class="right"><span>已售35件</span></div>
      </div>
      <div class="bottom">
        <span>三星手机 SAMSUNG Galaxy S23 8GB+256GB 超视觉夜拍系统 超清夜景 悠雾紫 5G手机 游戏拍照旗舰机s23</span>
      </div> -->
    </div>
    <!-- 服务 -->
    <div class="service">
      <div class="box">
        <div class="box1">
          <div class="float"> <i class="iconfont icon-icon-receive"></i><span>七天无理由退货</span>
          </div>
          <div class="float">
            <i class="iconfont icon-icon-receive"></i><span>48小时发货</span>
          </div>
        </div>
        <span class="iconfont icon-xiangyoujiantou"></span>
      </div>
    </div>
    <!-- 评论 -->
    <div class="reviews">
      <div class="total">
        <div class="left">
          商品评价( <span>5条</span> )
        </div>
        <div class="right">
          <span>查看更多</span><i class="iconfont icon-xiangyoujiantou"></i>
        </div>
      </div>
      <div class="list">
        <div class="list-item">
          <div class="user">
            <div class="left">
              <img src="http://cba.itlike.com/public/uploads/10001/20230321/a0db9adb2e666a65bc8dd133fbed7834.png"
                alt=""><span>周围是神</span>
            </div>
            <div class="right">
              <i class="iconfont icon-wujiaoxing-"></i>
              <i class="iconfont icon-wujiaoxing-"></i>
              <i class="iconfont icon-wujiaoxing-"></i>
              <i class="iconfont icon-wujiaoxing-"></i>
              <i class="iconfont icon-wujiaoxing"></i>
            </div>
          </div>
          <div class="user-reviews"><span>质量很不错 挺喜欢的</span></div>
          <div class="time"></div>
        </div>
        <div class="list-item">
          <div class="user">
            <div class="left">
              <img src="http://cba.itlike.com/public/uploads/10001/20230321/a0db9adb2e666a65bc8dd133fbed7834.png"
                alt=""><span>张献忠</span>
            </div>
            <div class="right">
              <i class="iconfont icon-wujiaoxing-"></i>
              <i class="iconfont icon-wujiaoxing-"></i>
              <i class="iconfont icon-wujiaoxing-"></i>
              <i class="iconfont icon-wujiaoxing-"></i>
              <i class="iconfont icon-wujiaoxing-"></i>
            </div>
          </div>
          <div class="user-reviews"><span>你疑似有点前途了</span></div>
          <div class="time"></div>
        </div>
      </div>
    </div>
    <!-- 商品描述 -->
    <div class="goods-content">
      <div class="goods-title">
        <span>商品描述</span>
      </div>
      <div id="goods-totalcontent">
      </div>
    </div>
    <!-- 遮罩 -->
    <div class="mask"></div>
    <!-- 弹窗 -->
    <div class="popup">
      <div class="title">服务</div>
      <div class="bottom">
        <div class="bottom-item">
          <i class="iconfont icon-icon-receive"></i>
          <p>七天无理由退货</p>
          <div>满足相应条件时，消费者可申请7天无理由退货</div>
        </div>
        <div class="bottom-item">
          <i class="iconfont icon-icon-receive"></i>
          <p>48小时发货</p>
          <div>下单后48小时之内发货</div>
        </div>
      </div>
      <em class="iconfont icon-guanbi" id="closeBtn"></em>
    </div>
    <!-- 弹图 -->
    <img id="img" src="" alt="">
  </div>
  <!-- 底部区域 -->
  <footer>
    <div class="left">
      <a href="../index.html">
        <i class="iconfont icon-shouye"></i>
        <p>首页</p>
      </a>
      <a href="../shopingcart.html">
        <i class="iconfont icon-gouwuche"></i>
        <p>购物车</p>
      </a>
    </div>
    <div class="right">
      <div class="shopingcart btn">
        <span>加入购物车</span>
      </div>
      <div class="buynow btn">
        <span>立即购买</span>
      </div>
    </div>
  </footer>
  <script src="../js/axios.js"></script>
  <script src="../js/vue.js"></script>
  <script src="../js/common.js"></script>
  <script src="../swiper/swiper-bundle.min.js"></script>
  <script src="./js/index.js"></script>
  </body>

</html>